<template>
  <el-dialog
    title="选择生产单"
    v-model="visible"
    width="50%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <div class="search">
      <el-input
        v-model="search.search"
        prefix-icon="el-icon-search"
        placeholder="合同编码或者客户名称"
        clearable
      >
        <template #append>
          <el-button icon="el-icon-search" @click="selectOrder"></el-button>
        </template>
      </el-input>
    </div>

    <el-table
      ref="table"
      :data="orderList"
      row-key="id"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="合同编码" prop="contractCode" min-width="150" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="客户名称" prop="customerName" min-width="150" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="签订时间" prop="orderTime" width="120"></el-table-column>
      <el-table-column label="生产状态" prop="type" width="200">
        <template #default="scope">
          <p v-if="scope.row.type == 0">未生产</p>
          <p v-if="scope.row.type == 1" style="color: green">生产中</p>
          <p v-if="scope.row.type == 2" style="color: #2bd814">已完成</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="交货时间" prop="deliveryTime" width="200">
      </el-table-column>
      <el-table-column label="排产状态" prop="schedulingStatus" width="200">
        <template #default="scope">
          <p v-if="scope.row.schedulingStatus == 0">未排产</p>
          <p v-if="scope.row.schedulingStatus == 1" style="color: green">
            部分排产
          </p>
          <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
            已完成
          </p>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template #default="scope">
          <el-button
            text
            type="primary"
            size="small"
            @click="table_show(scope.row, scope.$index)"
            v-auth-button="['show/produceOrderManagement']"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      small
      layout="total, prev, pager, next"
      :page-size="limit"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        :loading="isSaveing"
        @click="confirm()"
        :disabled="selectedList.length != 1"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'selectVendor',
  emits: ['closed', 'setVendor'],
  data () {
    return {
      isSaveing: false,
      visible: false,
      orderList: [],//订单列表
      selectedList: [],
      search: {
        search: '',
        page: 1,
        limit: 10
      },
      total: 0
    }
  },

  methods: {
    open () {
      this.visible = true
      this.getOrderList()
    },

    // 获取生产单
    async getOrderList () {
      let res = await this.$API.produce.returnProduct.getIsDeliverList.get(this.search)
      this.orderList = res.data
      this.total = res.total
    },

    // 搜索订单
    selectOrder () {
      this.getOrderList()
    },

    // 选择订单
    handleSelectionChange (list) {
      this.selectedList = list
    },


    // 确认选择
    confirm () {
      this.visible = false
      this.$emit('setOrder', this.selectedList[0])
    },
    //查看
    table_show (row) {
      this.$router.push({
        path: '/produce/produceOrderManagement/produceOrderDetail',
        query: {
          id: row.id
        }
      })
    },

    handleCurrentChange (val) {
      this.page = val
      this.getOrderList()
    }
  }
}
</script>
<style lang='scss' scoped>
.search {
  width: 50%;
  margin-bottom: 15px;
}
</style>